<!DOCTYPE html>
<html xmlns:th="http://www.thymleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>Add a User</title>
    <script src="../static/js/script.js" th:src="@{/js/script.js}"></script>
    <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}">
</head>

<body>
    <nav th:replace="fragments/links :: nav.navigation-links"></nav>
    <main class="container">
        <div class="p-4 p-md-5 mb-4 text-center">
            <h1 class="my-2 pb-3">Add a User</h1>

            <div id="error" class="error">
                <div th:if="${errorMsg}">
                    <p th:text="${errorMsg}"></p>
                </div>
            </div>

            <form name="form" action="#" th:action="@{/addUser}" method="post" onsubmit="return verify()">
                <div class="form-group row justify-content-center my-2">
                    <label for="inputUserName" class="col-sm-2 col-form-label">User name:</label>
                    <div class="col-sm-4">
                        <input type="text" name="userName" class="form-control" id="inputUserName"
                            placeholder="Enter Username">
                    </div>
                </div>
                <div class="form-group row justify-content-center my-2">
                    <label for="inputPassword" class="col-sm-2 col-form-label">Password:</label>
                    <div class="col-sm-4">
                        <input type="password" name="password" class="form-control" id="inputPassword"
                            placeholder="Enter Password">
                    </div>
                </div>
                <div class="form-group row justify-content-center my-2" th:each="authority:${authorities}">
                    <label th:for="${authority}" th:text="${authority}" class="col-sm-2 col-form-label"></label>
                    <div class="col-sm-4">
                        <input type="checkbox" name="authorities" th:value="${authority}" th:id="${authority}">
                    </div>
                </div>
                <input type="submit" value="Add User" class="btn btn-primary m-2 pb-2">
            </form>
            <div class="container text-center my-2">
                <p class="lead"><a href="/" th:href="@{/}">Back to Home</a></p>
            </div>
        </div>
    </main>
    <div class="b-example-divider border border-light"></div>
    <div th:include="fragments/links :: div.bottom-links"></div>
    <div th:replace="fragments/footer.html :: page-footer"></div>
</body>

</html>